<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>设备列表</title>
    	<script src="${pageContext.request.contextPath}/static/bootstrap4/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrapTable/dist/bootstrap-table.min.js"></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrapTable/dist/locale/bootstrap-table-zh-CN.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/tips.js"></script>
	 
	    <style type="text/css">

        *{
            padding: 0px;
            margin: 0px;
        }
   
        .toast-center-center {
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -150px;
        }



    </style>
<body>


 <c:set value="${pageContext.request.contextPath}/index.jsp" var="prefixPath" scope="page"></c:set>
<%
    SimpleDateFormat sdf= new SimpleDateFormat("yyyy-MM-dd");
    String thisTime= sdf.format(new Date());
%>


 <div class="container shadow-sm p-3 mb-5 bg-white rounded">
     <div class="row">
         <div class="col-12 col-md-12">
             <input type="text" id="input_text" style="width:200px;" class="form-control rounded-0 border-info float-left" placeholder="请输入搜索内容">
             <button type="button" class="btn btn-info rounded-0 float-left" id="sub">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                     <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                 </svg>
                 搜索设备</button>
             <button class="btn btn-info ml-2" id="refreshData">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                 </svg>
                 刷新</button>

         </div>
     </div>

     <div class="row mt-2">
         <div class="col-12">
             <table id="mytab" class="table table-hover" style="table-layout:fixed;word-break:break-all"></table>
         </div>
     </div>

 </div>


 <!-- 模态框（Modal） -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-lg"  style="width: 800px;height: 400px;">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title" id="myModalLabel">修改设备</h4>
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             </div>
             <div class="modal-body">
                 <!--设备id -->
                 <input type="text" style="display:none;" class="form-control" id="mId" >
                 <!--点前id  -->
                 <input type="text" style="display:none;" class="form-control" id="trId" >
                 <div class="container">
                     <div class="row">
                         <div class="col-4">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>设备名</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="mName" >
                                 </div>
                             </div>
                         </div>
                         <div class="col-4">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>类型</label>
                                 </div>
                                 <div class="col-8">
                                     <select class="form-control" id="mType">
                                         <c:forEach var="types" items="${eType}">
                                             <option value="${types.id}">${types.type}</option>
                                         </c:forEach>
                                     </select>
                                 </div>
                             </div>
                         </div>
                         <div class="col-4">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>品牌</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="mBrand" >
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="row pt-2">

                         <div class="col-4">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>型号</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="mModel" >
                                 </div>
                             </div>
                         </div>
                         <div class="col-4">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>制作商</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="mMf" >
                                 </div>
                             </div>
                         </div>
                         <div class="col-4">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>数量</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="mNum" >
                                 </div>
                             </div>

                         </div>

                     </div>
                     <div class="row pt-2">
                         <div class="col-6">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>出厂日期</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="dyTime" >
                                 </div>
                             </div>
                         </div>
                         <div class="col-6">
                             <div class="row">
                                 <div class="col-4 text-right p-0">
                                     <label>购买时间</label>
                                 </div>
                                 <div class="col-8">
                                     <input type="text" class="form-control" id="pcTime" >
                                 </div>

                             </div>
                         </div>
                     </div>
                 </div>

             </div>
             <!-- <div class="modal-body">

            	<input type="text" style="display:none;" class="form-control" id="mId" >

            	<input type="text" style="display:none;" class="form-control" id="trId" >
                <label>设备名：</label>
                <input type="text" class="form-control" id="mName" >
                <label>类型：</label>
                <select class="form-control" id="mType">
                    <c:forEach var="types" items="${eType}">
                        <option value="${types.id}">${types.type}</option>
                    </c:forEach>
                </select>
                <label>品牌：</label>
                <input type="text" class="form-control" id="mBrand" >
                <label>型号：</label>
                <input type="text" class="form-control" id="mModel" >
                <label>制作商：</label>
                <input type="text" class="form-control" id="mMf" >
                <label>数量：</label>
                <input type="text" class="form-control" id="mNum" >
                <label>出厂日期：</label>
                <input type="text" class="form-control" id="dyTime" >
                <label>购买时间：</label>
                <input type="text" class="form-control" id="pcTime" >
            </div>  -->
             <div class="modal-footer">
                 <button type="button" onclick="suData()" class="btn btn-primary" data-dismiss="modal">提交</button>
             </div>
         </div>
     </div>
 </div>
 </div>



</body>

   <script type="text/javascript">
       var prefixPtah="${pageContext.request.contextPath}";
       var url=prefixPtah+"/ep/params";
       var $mytab= $('#mytab');
       var val="";

       $(function () {


           var oTable = new TableInit();
           oTable.Init("mytab","get",url,columnsData,queryParams);
           
           //搜索框提交的值
           $("#sub").click(function () {
        	   url=prefixPtah+"/ep/params";
               val=$("#input_text").val();
        	   $mytab.bootstrapTable('destroy');//摧毁在重新执行
        	   oTable.Init("mytab","get",url,columnsData,queryParams);
           });


           //刷新界面
           $("#refreshData").click(function (){
                   window.parent.frames.detailed("/ep/eList");
           });
           
           /*调用字段   */

           customTips();

       });
       
       
       columnsData=[
           {
               title : '序号',
               field : 'id',
               align: 'center',
               formatter:function (value,row,index) {
                    return index+1;
               }
           },
           {
               title : '设备名',
               field : 'eName',
               align: 'center',
           }, {
               title : '类型',
               field : 'etype',
               align: 'center',
           }, {
               title : '类型id',
               field : 'etypeId',
               align: 'center',
               visible:false,//隐藏
           }, {
               title : '品牌',
               field : 'brand',
               align: 'center',
           }, {
               title : '型号',
               field : 'model',
               align: 'center',
           }, {
               title : '厂商',
               field : 'manufacturer',
               align: 'center',
               //sortable : true
           }, {
               title : '数量',
               field : 'num',
               align: 'center',
           }, {
               title : '出厂日期',
               field : 'deliveryTime',
               align: 'center',
           }, {
               title : '购买时间',
               field : 'purchaseTime',
               align: 'center',
           },{
               title:"操作",
               field:"eID",
               align: 'center',
               width:"200px",
               formatter:operation,
           }
       ]

      

         function  queryParams(params) {//上传服务器的参数
           var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
               limit : params.limit, // 每页显示数量
               offset : params.offset, // SQL语句起始索引
               pageNumber: params.pageNumber,
               pageSize: params.pageSize,
               params:val,//按条件搜索
           };

           return temp;
       }


       //<![CDATA[
    	   
    	   /*字段查询  */
       function fileQuery(){
           var oTable = new TableInit();
    	   tempurl=prefixPtah+"/ep/fielQuery"
    		var ename= $("#eName3").val();
    		var etype=$("#eType3").val();
    		var dtime=$("#dTime3").val();
    		var ptime= $("#pTime3").val();
    	   val=JSON.stringify({"eName":ename,"typeId":etype,"dTime":dtime,"pTime":ptime});
    	   $mytab.bootstrapTable('destroy');
           oTable.Init("mytab","get",tempurl,columnsData,queryParams);
    	}
   

    	   
       function  operation(value,row,index) {
    	   
           var id=row.eID
           var tid= row.etypeId
           var result="<button class='btn btn-info' style='margin-right: 10px' onclick='del("+id+")'><svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>"+
        	   "<path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/>"+
        		   "<path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/>"
        		 +"</svg>删除</button>" +
               "<button  class='btn btn-info' style='margin-right: 10px' onclick='upEp(this,"+tid+","+id+","+index+")'><svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' class='bi bi-pencil' viewBox='0 0 16 16'>"+
            	   "<path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/>"
            		  +" </svg>修改</button>";
           return result;
       }


       function del(id) {
           var flag= confirm("是否要删除?")
           if (flag){
               $.ajax({
                   type:"get",
                   dataType:"json",
                   contentType:"application/json;charset=utf-8",
                   url:"${pageContext.request.contextPath}/ep/del",
                   data:{"id":id},
                   success:function (data) {
                       if (data.state){
                            $mytab.bootstrapTable('remove', {
                                     field: 'eID',
                                     values: [id]
                                 })
                       }else {
                           toastr.warning("删除失败");
                       }

                   },
                   error:function (e) {
                        console.log(e);
                        toastr.error("服务器异常");
                   }

               })
           }



       }

		
       function upEp(obj,tid,id,index) {
    	   var $tr= $(obj).parent().siblings("td")
    	  $("#trId").val(index);
    	  $("#mName").val($tr.eq(1).text());
     	  $("#mId").val(id)
          $("#mBrand").val($tr.eq(3).text());
          $("#mModel").val($tr.eq(4).text());
          $("#mMf").val($tr.eq(5).text());
          $("#mNum").val($tr.eq(6).text());
          $("#dyTime").val($tr.eq(7).text());
          $("#pcTime").val($tr.eq(8).text());
          $("#mType").find("option[value="+tid+"]").prop("selected",true);
          $('#myModal').modal("show");
       }


       function suData() {
    	   var id=$("#mId").val()
           var $mName= $("#mName").val();
           var $mType=$("#mType").val();
           var $mBrand= $("#mBrand").val();
           var $mModel=$("#mModel").val();
           var $mMf=$("#mMf").val();
           var $mNum=$("#mNum").val();
           var $dyTime=$("#dyTime").val();
           var $pcTime=$("#pcTime").val();
           var temp= $("#mType").find("option[value="+$mType+"]").text();
           var msg={"eid":id,"eName":$mName,"etype":{"id":$mType,"type":""},"brand":$mBrand,"model":$mModel,
               "manufacturer":$mMf,"num":$mNum,"purchaseTime":$dyTime,"deliveryTime":$pcTime};
        
           $.ajax({
               type:"post",
               dataType:"json",
               contentType:"application/json;charset=utf-8",
               url:prefixPtah+"/ep/temp",
               data:JSON.stringify(msg),
               success:function (data) {
                   if (data.state){
                       toastr.success("更改成功");

                       $mytab.bootstrapTable("updateRow", {
                           index:$("#trId").val(),
                           row:{
                               eName:$mName,
                               etype:temp,
                               brand:$mBrand,
                               model:$mModel,
                               manufacturer:$mMf,
                               num:$mNum,
                               deliveryTime:$dyTime,
                               purchaseTime:$pcTime
                           }
                       });

                   }else{
                       toastr.error("数据有误");
                   }
               },
               error:function (e) {
                   console.log(e);
                   toastr.error("服务器异常");
               }


           })
         
       }

       // ]]>
       
   </script>


   



</html>
